<template>
  <div class="recruitment-container">
    <Header />
    <div class="content-wrapper">
      <h2>社团纳新管理</h2>
      
      <div class="stage-tabs">
        <button 
          class="stage-tab" 
          :class="{ active: currentStage === 'registration' }"
          @click="switchStage('registration')"
        >
          报名管理
        </button>
        <button 
          class="stage-tab" 
          :class="{ active: currentStage === 'firstInterview' }"
          @click="switchStage('firstInterview')"
        >
          一面管理
        </button>
        <button 
          class="stage-tab" 
          :class="{ active: currentStage === 'secondInterview' }"
          @click="switchStage('secondInterview')"
        >
          二面管理
        </button>
        <button 
          class="stage-tab" 
          :class="{ active: currentStage === 'result' }"
          @click="switchStage('result')"
        >
          面试结果
        </button>
      </div>

      <!-- 报名管理 -->
      <div v-if="currentStage === 'registration'" class="stage-content">
        <div class="action-bar">
          <button class="btn-add" @click="showAddDialog = true">添加报名信息</button>
        </div>
        
        <table class="data-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>学院</th>
              <th>联系电话</th>
              <th>意向部门1</th>
              <th>意向部门2</th>
              <th>意向部门3</th>
              <th>是否服从调剂</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in registrationList" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.college }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.dept1 }}</td>
              <td>{{ item.dept2 || '-' }}</td>
              <td>{{ item.dept3 || '-' }}</td>
              <td>{{ item.adjust ? '是' : '否' }}</td>
              <td class="action-buttons">
                <button @click="editRegistration(item)" class="btn-edit">编辑</button>
                <button @click="promoteToFirstInterview(item)" class="btn-promote">进入一面</button>
              </td>
            </tr>
            <tr v-if="registrationList.length === 0">
              <td colspan="9" class="no-data">暂无报名数据</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 一面管理 -->
      <div v-if="currentStage === 'firstInterview'" class="stage-content">
        <table class="data-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>学院</th>
              <th>联系电话</th>
              <th>意向部门1</th>
              <th>意向部门2</th>
              <th>意向部门3</th>
              <th>是否服从调剂</th>
              <th>备注</th>
              <th>是否进入二面</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in firstInterviewList" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.college }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.dept1 }}</td>
              <td>{{ item.dept2 || '-' }}</td>
              <td>{{ item.dept3 || '-' }}</td>
              <td>{{ item.adjust ? '是' : '否' }}</td>
              <td>{{ item.remark || '-' }}</td>
              <td>
                <select 
                  v-model="item.toSecond" 
                  @change="updateFirstInterviewStatus(item)"
                  class="status-select"
                >
                  <option :value="true">是</option>
                  <option :value="false">否</option>
                </select>
              </td>
              <td class="action-buttons">
                <button @click="editFirstInterview(item)" class="btn-edit">编辑</button>
                <button 
                  @click="promoteToSecondInterview(item)" 
                  class="btn-promote"
                  :disabled="!item.toSecond"
                >
                  进入二面
                </button>
              </td>
            </tr>
            <tr v-if="firstInterviewList.length === 0">
              <td colspan="11" class="no-data">暂无一面数据</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 二面管理 -->
      <div v-if="currentStage === 'secondInterview'" class="stage-content">
        <table class="data-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>学院</th>
              <th>联系电话</th>
              <th>一面意向部门1</th>
              <th>一面意向部门2</th>
              <th>是否通过</th>
              <th>所属部门</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in secondInterviewList" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.college }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.dept1 }}</td>
              <td>{{ item.dept2 || '-' }}</td>
              <td>
                <select 
                  v-model="item.passed" 
                  @change="updateSecondInterviewStatus(item)"
                  class="status-select"
                >
                  <option :value="true">是</option>
                  <option :value="false">否</option>
                </select>
              </td>
              <td>
                <select 
                  v-model="item.belongDept" 
                  @change="updateSecondInterviewStatus(item)"
                  class="dept-select"
                  :disabled="!item.passed"
                >
                  <option value="">请选择部门</option>
                  <option v-for="dept in departments" :value="dept">{{ dept }}</option>
                </select>
              </td>
              <td class="action-buttons">
                <button @click="editSecondInterview(item)" class="btn-edit">编辑</button>
              </td>
            </tr>
            <tr v-if="secondInterviewList.length === 0">
              <td colspan="9" class="no-data">暂无二面数据</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 面试结果 -->
      <div v-if="currentStage === 'result'" class="stage-content">
        <table class="data-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>学院</th>
              <th>联系电话</th>
              <th>所属部门</th>
              <th>面试结果</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in resultList" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.college }}</td>
              <td>{{ item.phone }}</td>
              <td>{{ item.belongDept }}</td>
              <td class="result-status">{{ item.passed ? '通过' : '未通过' }}</td>
            </tr>
            <tr v-if="resultList.length === 0">
              <td colspan="6" class="no-data">暂无面试结果数据</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- 添加/编辑报名信息弹窗 -->
    <div v-if="showAddDialog || showEditDialog" class="dialog-overlay">
      <div class="dialog-container">
        <h3>{{ showAddDialog ? '添加报名信息' : '编辑报名信息' }}</h3>
        <form class="dialog-form">
          <div class="form-group">
            <label>姓名</label>
            <input type="text" v-model="formData.name" required>
          </div>
          <div class="form-group">
            <label>学院</label>
            <input type="text" v-model="formData.college" required>
          </div>
          <div class="form-group">
            <label>联系电话</label>
            <input type="tel" v-model="formData.phone" required>
          </div>
          <div class="form-group">
            <label>意向部门1</label>
            <select v-model="formData.dept1" required>
              <option value="">请选择</option>
              <option v-for="dept in departments" :value="dept">{{ dept }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>意向部门2</label>
            <select v-model="formData.dept2">
              <option value="">请选择</option>
              <option v-for="dept in departments" :value="dept">{{ dept }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>意向部门3</label>
            <select v-model="formData.dept3">
              <option value="">请选择</option>
              <option v-for="dept in departments" :value="dept">{{ dept }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>是否服从调剂</label>
            <div class="radio-group">
              <label>
                <input type="radio" v-model="formData.adjust" :value="true"> 是
              </label>
              <label>
                <input type="radio" v-model="formData.adjust" :value="false"> 否
              </label>
            </div>
          </div>
          <div v-if="currentStage === 'firstInterview'" class="form-group">
            <label>备注</label>
            <textarea v-model="formData.remark"></textarea>
          </div>
          <div class="form-actions">
            <button type="button" class="btn-cancel" @click="closeDialog">取消</button>
            <button type="button" class="btn-save" @click="saveForm">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'

// 部门列表
const departments = [
  '电台部', '采播部', '技术部', '新媒体中心', '办公室'
]

// 状态管理
const currentStage = ref('registration')
const showAddDialog = ref(false)
const showEditDialog = ref(false)
const formData = ref({})

// 数据列表
const registrationList = ref([])
const firstInterviewList = ref([])
const secondInterviewList = ref([])
const resultList = ref([])

// 初始化数据
onMounted(() => {
  // 从本地存储加载数据
  loadData()
})

// 加载数据
const loadData = () => {
  const savedRegistrations = localStorage.getItem('recruitment_registrations')
  const savedFirst = localStorage.getItem('recruitment_first')
  const savedSecond = localStorage.getItem('recruitment_second')
  
  if (savedRegistrations) registrationList.value = JSON.parse(savedRegistrations)
  if (savedFirst) firstInterviewList.value = JSON.parse(savedFirst)
  if (savedSecond) secondInterviewList.value = JSON.parse(savedSecond)
  
  // 从二面数据生成结果列表
  resultList.value = [...secondInterviewList.value]
}

// 保存数据到本地存储
const saveData = () => {
  localStorage.setItem('recruitment_registrations', JSON.stringify(registrationList.value))
  localStorage.setItem('recruitment_first', JSON.stringify(firstInterviewList.value))
  localStorage.setItem('recruitment_second', JSON.stringify(secondInterviewList.value))
}

// 切换环节
const switchStage = (stage) => {
  currentStage.value = stage
}

// 添加报名信息
const addRegistration = () => {
  formData.value = {
    id: Date.now(),
    name: '',
    college: '',
    phone: '',
    dept1: '',
    dept2: '',
    dept3: '',
    adjust: false
  }
  showAddDialog.value = true
}

// 编辑报名信息
const editRegistration = (item) => {
  formData.value = { ...item }
  showEditDialog.value = true
}

// 编辑一面信息
const editFirstInterview = (item) => {
  formData.value = { ...item }
  showEditDialog.value = true
}

// 编辑二面信息
const editSecondInterview = (item) => {
  formData.value = { ...item }
  showEditDialog.value = true
}

// 关闭弹窗
const closeDialog = () => {
  showAddDialog.value = false
  showEditDialog.value = false
  formData.value = {}
}

// 保存表单
const saveForm = () => {
  if (showAddDialog.value) {
    registrationList.value.push(formData.value)
  } else {
    if (currentStage.value === 'registration') {
      const index = registrationList.value.findIndex(item => item.id === formData.value.id)
      if (index !== -1) registrationList.value[index] = formData.value
    } else if (currentStage.value === 'firstInterview') {
      const index = firstInterviewList.value.findIndex(item => item.id === formData.value.id)
      if (index !== -1) firstInterviewList.value[index] = formData.value
    } else if (currentStage.value === 'secondInterview') {
      const index = secondInterviewList.value.findIndex(item => item.id === formData.value.id)
      if (index !== -1) secondInterviewList.value[index] = formData.value
    }
  }
  
  saveData()
  closeDialog()
  // 更新结果列表
  resultList.value = [...secondInterviewList.value]
}

// 推进到一面
const promoteToFirstInterview = (item) => {
  // 添加到一面列表
  firstInterviewList.value.push({
    ...item,
    remark: '',
    toSecond: false
  })
  
  // 从报名列表移除
  registrationList.value = registrationList.value.filter(reg => reg.id !== item.id)
  
  saveData()
}

// 推进到二面
const promoteToSecondInterview = (item) => {
  // 添加到二面列表
  secondInterviewList.value.push({
    ...item,
    passed: false,
    belongDept: ''
  })
  
  // 从一面列表移除
  firstInterviewList.value = firstInterviewList.value.filter(f => f.id !== item.id)
  
  saveData()
  // 更新结果列表
  resultList.value = [...secondInterviewList.value]
}

// 更新一面状态
const updateFirstInterviewStatus = (item) => {
  saveData()
}

// 更新二面状态
const updateSecondInterviewStatus = (item) => {
  saveData()
  // 更新结果列表
  resultList.value = [...secondInterviewList.value]
}
</script>

<style scoped>
.recruitment-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e8e8;
}

.stage-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.stage-tab {
  padding: 10px 20px;
  background-color: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.stage-tab.active {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.stage-content {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.action-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-end;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: 500;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-add {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-edit {
  background-color: #52c41a;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-promote {
  background-color: #faad14;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.btn-promote:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 30px;
}

.status-select,
.dept-select {
  padding: 4px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.result-status {
  color: #52c41a;
  font-weight: bold;
}

.result-status:not(:contains('通过')) {
  color: #ff4d4f;
}

/* 弹窗样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-container {
  background-color: white;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  padding: 20px;
}

.dialog-form .form-group {
  margin-bottom: 15px;
}

.dialog-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.dialog-form input,
.dialog-form select,
.dialog-form textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.radio-group {
  display: flex;
  gap: 15px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.btn-cancel {
  background-color: #f5f5f5;
  color: #333;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-save {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
</style>